<template>
    <div class="home">
        <p> 求和为：{{ sum }}</p>
        <p> 名字为：{{ person.name }}</p>
        <p>年龄为： {{ person.age }}</p>
        <p>汽车为：{{ car }}</p>
        <button @click="changeSum">和++</button>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改整个人</button>
        <br>
        <button @click="changeBrand">修改车品牌</button>
        <button @click="changeColor">修改车颜色</button>
        <button @click="changeEngine">修改车发动机</button>
        <button @click="changeCar">修改整个车</button>
    </div>
</template>


<script setup lang="ts" name="Page57">
import { ref,shallowRef, shallowReactive, reactive } from 'vue';
/*
let sum = ref(0);
let person = ref({
    name: '张三',
    age: 18
})
*/
// shallowRef 浅层次 只管第一层
let sum = shallowRef(0);
let person = shallowRef({
    name: '张三',
    age: 18
})


function changeSum() {
    sum.value += 1
}
function changeName() {
    person.value.name = '李四'
}
function changeAge() {
    person.value.age += 1
}
function changePerson() {
    person.value = {
        name: '哈哈',
        age: 88
    }
}
/*
let car = reactive({
    barnd:'奔驰',
    options:{
        color:'红色',
        engine:'V8'
    }
})
*/
// shallowReactive 绕开深度响应，
let car = shallowReactive({
    barnd:'奔驰',
    options:{
        color:'红色',
        engine:'V8'
    }
})

function changeBrand (){
    car.barnd = "宝马"
}
function changeColor (){
    car.options.color = '紫色'
    
}
function changeEngine (){
    car.options.engine ='V12'
}
function changeCar (){
    car.options={
        color:'黑色',
        engine:'p1'
    }
}


</script>

<style lang="scss" scoped>
.home {
    background-color: #ddd;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 10px;
}
button {
    margin-left: 5px;
    margin-top: 5px;
}
</style>